<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>1</div>
    <div>2</div>
    <div class="c">3</div>


    <input type="text">
    <input type="text" class="a">
    <input type="text">


    <div class="d"></div>

    <script>

        // 获取元素

        function GetEle(ele) {
            this.eles = document.querySelectorAll(ele);

        }


        // 返回一个实例化对象
        function $(ele) {
            return new GetEle(ele);
        }

        GetEle.prototype.hide = function () {
            for (let i = 0; i < this.eles.length; i++) {
                this.eles[i].style.display = 'none';
            }
            return this
        }


        // val没有参数的时候，就是获取这个值    有参数的时候就是设置这个值  
        GetEle.prototype.val = function (v) {
            if (v) {
                for (let i = 0; i < this.eles.length; i++) {
                    this.eles[i].value = v
                }
                // return this
            } else {
                // 返回第一个的值
                return this.eles[0].value;
            }
            return this
        }


        GetEle.prototype.html = function (v) {
            if (v) {
                for (let i = 0; i < this.eles.length; i++) {
                    this.eles[i].innerHTML = v
                }
            } else {
                // 返回第一个的值
                return this.eles[0].innerHTML;
            }
            return this
        }


        GetEle.prototype.text = function (v) {
            if (v) {
                for (let i = 0; i < this.eles.length; i++) {
                    this.eles[i].innerText = v
                }
            } else {
                // 返回第一个的值
                return this.eles[0].innerText;
            }
            return this
        }



        //   添加类名  可以添加1个或者多个
        // addClass()
        GetEle.prototype.addClass = function (v) {
            for (let i = 0; i < this.eles.length; i++) {
                this.eles[i].className += ' ' + v ;
            }
            return this 
        }





        //   删除类名  可以删除1个或者多个
        // removeClass('aa dd')
        GetEle.prototype.removeClass = function (v) {
            for (let i = 0; i < this.eles.length; i++) {
                // const arrList = this.eles[i].classList ;
                // const arr = [...arrList] ;
                // if(arr.indexOf(v) > -1) {
                //     let j = arr.indexOf(v) ;
                //     arr.splice(j , 1) ;
                //     console.log(arr);
                //     const str = arr.join(' ') ;
                //     this.eles[i].className = str ;
                // }

                const arr = v.split(' ') ;
                arr.forEach(v=> {
                    this.eles[i].classList.remove(v) ;
                })
                
            }
            return this
        }

        // toggle 切换  如果有就删除   如果没有就添加
        GetEle.prototype.toggleClass = function (v) {
            for (let i = 0; i < this.eles.length; i++) {
               
                const arr = v.split(' ') ;
                arr.forEach(v=> {
                    if(this.eles[i].classList.contains(v)) {
                        this.eles[i].classList.remove(v) ;
                    } else {
                        this.eles[i].classList.add(v) ;
                    }
                })
                
            }
            return this
        }


        // hasClass  判断是不是有这个类名

        GetEle.prototype.hasClass = function(v) {
            const arrList = ths.eles[0].classList ;
            const arr = [...arrList] ;
            if(arr.includes(v)) {
                return true
            } 
            return false
        }



        // 样式css     
        //    $('p').css('width')  获取这个元素的宽度    
        //    $('p').css('width' , '200px')  设置宽度为200px
        //    $('p').css({'width' : '200px' , 'height' : '100px'})

        GetEle.prototype.css = function() {
            if(arguments.length == 2) {
                for(let i = 0 ; i < this.eles.length ; i++) {
                    this.eles[i].style[arguments[0]] = arguments[1] ;
                }
            } else if(arguments.length == 1) {
                // 判断数据类型
                if(typeof arguments[0] === 'string') {
                    // return this.eles[0].style.width 
                    return getComputedStyle(this.eles[0])[arguments[0]]
                } else if(typeof arguments[0] === 'object') {
                    for(let i = 0 ; i < this.eles.length ; i++) {
                        // 遍历对象
                        for(let key in arguments[0]) {
                            this.eles[i].style[key] = arguments[0][key] ;
                        }
                    }
                }
            }
            return this
        }




        // $('body').css('color' , 'red') ;

        // $('div').css({
        //     'color' : 'blue' , 
        //     'background-color' : 'yellow',
        //     'width' : '200px' 
        // }) ;



        

            
        // $('.d').addClass('qq')

        // $('.d').html(666)

        $('.d').addClass('qq').html(666).css('width' , '200px').hide()






        $('input').val(9)

        $('.c').text('<Strong>333<strong>')

        $('.c').addClass('aa dd')

        $('.c').removeClass('aa dd')


        $('.c').toggleClass('aa dd')


        const res = $('.a').val()








        document.onclick = function () {
            // const eles = new GetEle('div') ;
            // eles.hide()

            $('div').hide()
        }

    </script>

</body>

</html>